<template>
  <el-scrollbar>
    <div style="margin-bottom: 5px;">
      <el-input v-model="ordernumber" placeholder="请输入订单号" suffix-icon="Search" style="width: 200px;"
                @keyup.enter.native="loadPost"></el-input>
      <el-button type="primary" @click="loadPost">查询</el-button>
      <el-button type="success" @click="resetParam">重置</el-button>
      <el-button type="danger" @click="add">新增</el-button>
    </div>

    <el-table :data="tableData" border>
    
      <el-table-column prop="ordernumber" label="订单编号" width="120"></el-table-column>
      <el-table-column prop="storagefee" label="仓储费" width="120"></el-table-column>
      <el-table-column prop="remainingtons" label="剩余吨数" width="120"></el-table-column>
    
      <el-table-column label="操作">
        <template #default="scope">
          <el-button-group>
            <el-button type="success" @click="mod(scope.row)">编辑</el-button>
            <el-popconfirm title="确定删除这段内容吗?" @confirm="del(scope.row.id)" style="margin-left: 5px">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="demo-pagination-block">
      <el-pagination
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[5, 10, 20, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog v-model="centerDialogVisible" title="提示" width="500" center>
      <el-form :model="form" label-width="auto" style="max-width: 600px">
    
        <el-form-item label="订单编号" prop="ordernumber">
          <el-input v-model="form.ordernumber" />
        </el-form-item>
    
        <el-form-item label="仓储费" prop="storagefee">
          <el-input v-model="form.storagefee" />
        </el-form-item>
        <el-form-item label="剩余吨数" prop="remainingtons">
          <el-input v-model="form.remainingtons" />
        </el-form-item>
    
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-scrollbar>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'; // 导入 useRouter 方法
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { Location, Setting } from '@element-plus/icons-vue';

const router = useRouter(); // 获取 router 实例

const tableData = ref([]);
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(0);
const ordernumber = ref(''); // 确保 ordernumber 在此定义


const form = reactive({

  ordernumber: '',

  id: '',
  remainingtons:'',
  storagefee:'',
});

const resetForm = () => {

  form.ordernumber = '';

  form.id = '';
  form.storagefee='';
  form.remainingtons='';
};

const save = () => {
  const url = form.id ? "http://localhost:8090/expensedetails/update" : "http://localhost:8090/expensedetails/save";
  axios.post(url, form)
      .then(res => {
        if (res.data.code === 200) {
          ElMessage({
            message: '操作成功!',
            type: 'success'
          });
          centerDialogVisible.value = false;
          loadPost();
        } else {
          ElMessage({
            message: '操作失败！',
            type: 'warning'
          });
        }
      })
      .catch(err => {
        console.error('操作失败:', err);
        ElMessage({
          message: '操作失败！',
          type: 'error'
        });
      });
};

const centerDialogVisible = ref(false);

const add = () => {
  centerDialogVisible.value = true;
  resetForm();
};

const mod = (row) => {
  console.log('编辑:', row);
  // 执行编辑操作

  form.ordernumber = row.ordernumber;
  form.id = row.id;

  form.remainingtons=row.remainingtons;
  form.storagefee=row.storagefee;

  centerDialogVisible.value = true;
};
const del = (id) => {
  console.log('删除:', id);
  const url = "http://localhost:8090/expensedetails/delete";
  console.log(`Request URL: ${url}`);
  console.log(`Request Params:`, { id });

  axios.get(url, { params: { id } })
      .then(res => {
        if (res.data.code === 200) {
          ElMessage({
            message: '删除成功!',
            type: 'success'
          });
          loadPost();
        } else {
          ElMessage({
            message: '删除成功！',
            type: 'success'
          });
        }
      })
      .catch(err => {
        console.error('删除失败:', err);
        ElMessage({
          message: '删除失败！',
          type: 'error'
        });
      });
};

const resetParam = () => {
  ordernumber.value = '';
};
const loadPost = () => {
  const url = "http://localhost:8090/expensedetails/listPageC1";
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    param: {
      name: ordernumber.value
    }
  };

  console.log(`Request URL: ${url}`);
  console.log(`Request Params:`, params);

  axios.post(url, params)
      .then(res => {
        if (res.data && Array.isArray(res.data.data)) {
          tableData.value = res.data.data;
          total.value = res.data.total;
        } else {
          console.error('Expected an array in response data, but got:', res.data);
        }
      })
      .catch(err => {
        console.error(err);
      });
};

const handleSizeChange = (val) => {
  pageNum.value = 1;
  pageSize.value = val;
  loadPost();
};

const handleCurrentChange = (val) => {
  pageNum.value = val;
  loadPost();
};

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};

const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

const logout = () => {
  console.log('logout');
  router.push('/');
};

const toUser = () => {
  console.log('logout');
  router.push('/Home');
}
onMounted(() => {
  loadPost();
});
</script>

<style scoped>
.green-aside {
  background-color: #c5e1c5;
}
</style>
